<template>
	<div class="page" v-loading="loading">
		<el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/shop' }">融酒商城</el-breadcrumb-item>
			<el-breadcrumb-item>新增banner</el-breadcrumb-item>
		</el-breadcrumb>
		<el-form class="content" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px">
			<el-form-item label="广告名称">
				<el-input size="small" v-model="ruleForm.shelfName"></el-input>
			</el-form-item>
			<el-form-item label="banner链接">
				<el-tabs type="border-card" style="width:498px">
					<el-tab-pane label="商品">
						<select-one-goods-show v-on:sendOneGoodsData="getOneGoodsData"></select-one-goods-show>
					</el-tab-pane>
					<el-tab-pane label="链接">
						<el-input style="width:468px" size="small" v-model="ruleForm.shelfItems[0].linkUrl"></el-input>
					</el-tab-pane>
				</el-tabs>
			</el-form-item>
			<el-form-item label="广告图片">
				<upload-image v-on:sendImageData="getImageData"></upload-image>
			</el-form-item>
			<el-form-item label="排序">
				<el-input size="small" v-model="ruleForm.sequence"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" @click="submitForm('ruleForm')">确认添加</el-button>
				<el-button size="small" @click="utils.back">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
import uploadImage from '../../common/uploadImage.vue';
import selectOneGoodsShow from '../../common/selectOneGoodsShow.vue';
export default {
	name: "add",
	data() {
		return {
			ruleForm: {
				"sequence": 1,
				"shelfItems": [
					{
						"itemImgUrl": "",
						"itemType": "LINKTYPE",
						"linkUrl":""
					}
				],
				"shelfName": "",
				"shelfType": "FIRST_SCREEN_BANNER_1_1"
			},
			rules: {
				ads_name: [{
					required: true,
					message: '广告名称不能为空',
					trigger: 'blur'
				}],
				asd_link: [{
					required: true,
					message: '广告链接不能为空',
					trigger: 'blur'
				}],
				sort: [{
					required: true,
					message: '排序不能为空',
					trigger: 'blur'
				}],
			},
			loading: false,
		};
	},
	created() { },
	mounted() {
	},
	components: {
		uploadImage,
		selectOneGoodsShow
	},
	methods: {

		// 获取子组件传来的图片地址
		getImageData(data) {
			this.ruleForm.shelfItems[0].itemImgUrl = data;
		},
		// 获取子组件（选择商品）数据
		getOneGoodsData(data) {
			console.log(data)
			this.ruleForm.shelfItems[0].linkUrl = 'goods:' + data;
		},
		// 提交
		submitForm(formName) {
			this.loading = true;
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$post("goodsShelvesAdd", this.ruleForm).then(res => {
						this.loading = false;
						if (res.code == 200) {
							this.$msg.success("添加成功～");
							this.$router.back();
						} else {
							this.$msg.warning(res.message);
						}
					});
				} else {
					this.$msg.error("网络或服务器错误");
					this.loading = false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
	}
};
</script>

<style>
img {
  width: 200px;
  height: 200px;
}
</style>

<style lang="less" scoped>
.page {
  width: 100%;
  height: 100%;
  position: relative;
  .content {
    width: 1000px;
    margin: 0 auto;
    .el-input {
      width: 500px;
    }
  }
}
</style>